<template>
  <div class="list">
    <h2 style="margin: 17px 0; text-align: left;padding:0 10px;">接口总览</h2>
    <div class="search">
      <a-input-search v-model:value="searchKey" placeholder="输入要搜索的API名称关键字" enter-button
                      style="width: 300px;"
                      @search="handleTableChange({current, pageSize}, '', '')"/>
    </div>
    <hr>
    <a-table :columns="columns" :data-source="dataSource" :pagination="pagination"
             :loading="loading" @change="handleTableChange">
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue';
import type {TableProps} from 'ant-design-vue';
import {usePagination} from 'vue-request';
import axios from '@/axios';
import {useRoute} from "vue-router";

const programId = useRoute().params.id;

const columns = [
  {
    title: '接口名称',
    dataIndex: 'name',
    width: '20%',
    key: 'name'
  },
  {
    title: '所属目录',
    dataIndex: 'catalogName',
    width: '20%',
    key: 'catalogName'
  },
  {
    title: '请求方式',
    dataIndex: 'method',
    key: 'method',
    sorter: true,
    width: '20%',

  },
  {
    title: 'URL',
    dataIndex: 'url',
    key: 'url',
    width: '20%',
  },
];
const searchKey = ref('');
type APIParams = {
  results: number;
  page?: number;
  searchKey?: string;
  sortField?: string;
  sortOrder?: number;
  [key: string]: any;
};
type APIResult = {
  results: {
    name: string;
    catalogName: string;
    url: string;
    method: string;
  }[];
};

const total = ref(100);
//搜索与获取API
const queryData = (params: APIParams) => {
  return axios.get<APIResult>(`/api/list/${programId}`, {params}).then((response) => {
    total.value = response.data.length;
    return response.data;
  });
};

// 分页查询
const result = usePagination(queryData, {
  formatResult: res => res.data.results,
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'results',
  },
  searchKey: searchKey.value
});
// 查询后所获得的数据
let dataSource = result.data;
const run = result.run;
const loading = result.loading;
const current = result.current;
const pageSize = result.pageSize;



const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));

const handleTableChange: TableProps['onChange'] = (
    pag: {
      pageSize: number;
      current: number
    },
    filters: any,
    sorter: any,
) => {
  run({
    results: pag.pageSize,
    page: pag?.current,
    searchKey: searchKey.value.trim(),
    sortField: sorter.field,
    sortOrder: sorter.order,
    ...filters,
  });
};
</script>

<style scoped lang="less">

.list {
  margin: 20px;
  .search {
    padding-bottom: 10px;
    text-align: right;
  }
}

</style>
  



